<html>
<head>
  <title>Complex Layout</title>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../style/editorStyle.css" />
    <style>
		#header {
		    background: #7F99BE url(layout-browser-hd-bg.gif) repeat-x center;
		}
		#header h1 {
		    font-size: 16px;
		    color: #fff;
		    font-weight: normal;
		    padding: 5px 10px;
		}
    </style>
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
    <script src="../CodeMirror/js/codemirror.js" type="text/javascript"></script>
    <script src="../jCSSParser/jcssParser.js" type="text/javascript"></script>
    <script type="text/javascript" src="codeEditor.js"></script>
    <script type="text/javascript" src="cssOutline.js"></script>
    <script type="text/javascript" src="cssPreview.js"></script>
    <script type="text/javascript" src="cssValidator.js"></script>
    <script type="text/javascript">

        function x(n, i) {
        	var tree=Ext.getCmp("cssOutline");
        	var node=tree.getNodeById(n.type);
        	node.appendChild(new Ext.tree.TreeNode({text:n.name,leaf:true}));
        	node.expand();
        }
        
        function clearTree()
        {
        	var tree=Ext.getCmp("cssOutline");
        	var node=tree.getNodeById("element");
        	node.eachChild(function(n){n.remove()});
        	var node=tree.getNodeById("className");
        	node.eachChild(function(n){n.remove()});
        	var node=tree.getNodeById("id");
        	node.eachChild(function(n){n.remove()});
        }
        
        function onTextChange() {
            var code = this.editor.getCode();
            clearTree();
            var selectors = Wizking.jStyle.funParse(code, x);
        }
        
        function initEditor()
        {
        	//return;
	        var editor = CodeMirror.fromTextArea('code', {
	            //height: "850px",
	            lineNumbers: true,
	            parserfile: "parsecss.js",
	            stylesheet: "../CodeMirror/css/csscolors.css",
	            path: "../CodeMirror/js/",
	            onChange: onTextChange
	        });
        }
    </script>
    <script type="text/javascript">
    Ext.onReady(function(){
        
        var viewport = new Ext.Viewport({
            layout: 'border',
            width:800,
            height:500,
            border:false,
            renderTo:"container",
            items: 
            [
	           {
	                region: 'north',
	                split:true,
	                xtype:"box",
	                height: 30, // give north and south regions a height
	                applyTo: 'header'
	            },
            	{
            		region:"center",
            		layout:"border",
            		border:false,
            		items:
            		[
            			new wikisoft.cssCodeEditor(),
            			new wikisoft.cssPreview()
            		]
            	},
    			new wikisoft.cssValidator(),
    			new wikisoft.cssOutline()
            ]
            });
            
            initEditor();
    });
    </script>
</head>
<body>
<div id="header"><h1>Visual CSS online Editor</h1></div>
    <div id="container" style="">
    </div>
    <textarea id="code" style="height:100%">
/* CSS Document */
.selector
{
	color:red
}
</textarea>
</body>
</html>